import React, {memo} from 'react';
import { renderRoutes } from 'react-router-config';
import { Link } from 'react-router-dom';
import './bottom.css';
import {useLocation} from 'react-router'
import { connect } from 'react-redux';
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon';
import { actionCreators } from '../../pages/Main/store';
import qqmusic from '../../assets/images/qqmusic.png'
import qqmusic_active from '../../assets/images/qqmusic_active.png'
import mv from '../../assets/images/mv.png'
import mv_active from '../../assets/images/mv_active.png'
import community from '../../assets/images/community.png'
import community_active from '../../assets/images/community_active.png'
import my from '../../assets/images/my.png'
import my_active from '../../assets/images/my_active.png'


const Bottom = (props) => {
    let { route, num, index } = props;
    // console.log(route,"dd");
    const {pathname}= useLocation()
    //根据用户直接访问的处理，非首页
    index = route.routes.findIndex(item =>item.path ==pathname) - 1;
    // console.log(index,'index');
    const {path , routes} = route
    // console.log(routes.findIndex(item =>item.path ==path));
    // console.log(num, '///////')
    const { setIndexDispatch } = props;
    return (
        <>

        {/* fdfdasfafaafdas */}
        {/* 二级路由而准备 */}
        {renderRoutes(route.routes)}
        <ul className="Button-warper">
            <li 
            onClick={()=>{setIndexDispatch(0)}}
            className="Button-warper-warp" 
            key="1">
                <Link to="/home/main" 
                style={{textDecoration:"none"}}>
                    <div>
                        <div className="icon" >{
                            index===0? 
                            <img src={qqmusic_active} className='pic_1'/>:
                            <img src={qqmusic} alt="" className='pic_1'/>
                        }
                           
                        </div>
                        <div 
                            style={index===0?{color:"#65e295"}:{}}
                            className="planet">首页</div>
                    </div>
                </Link>
            </li>
            <li className="Button-warper-warp" key="2"
                onClick={()=>{setIndexDispatch(1)}}>
                    <Link to='/home/mv' style={{textDecoration:"none"}}>
                        {/* style={{ backgroundPosition: "-1.685rem 0px" }} */}
                        <div className="icon" >
                        {
                            index===1? 
                            <img src={mv_active} className='pic_1'/>:
                            <img src={mv} alt="" className='pic_1'/>
                        }
                            </div>
                        <div className="planet"style={index===1?{color:"#65e295"}:{}}>
                            MV
                    </div>
                    </Link>
                </li>
                <li className="Button-warper-warp" key="3"
                onClick={()=>{setIndexDispatch(2)}}>
                <Link to='/home/community' style={{textDecoration:"none"}}>
                {/* style={{backgroundPosition:"-93px 0px"}} */}
                    <div className="icon" 
                    >
                        {
                            index===2? 
                            <img src={community_active} className='pic_1'/>:
                            <img src={community} alt="" className='pic_1'/>
                        }
                    </div>
                    <div className="planet"style={index===2?{color:"#65e295"}:{}} >
                            社区
                            
                    </div>
                </Link>

                </li>
                <li className="Button-warper-warp" key="4"
                onClick={()=>{
                    setIndexDispatch(3);
                } }>
                    <Link to='/home/my' style={{textDecoration:"none"}}>

                        <div className="icon" 
                        >
                            {
                            index===3? 
                            <img src={my_active} className='pic_1'/>:
                            <img src={my} alt="" className='pic_1'/>
                        }
                        </div>
                        <div className="planet" style={index===3?{color:"#65e295"}:{}}>
                        我的 
                        <HeadNumIcon 
                                display="" 
                                top="-0.92rem"
                                left="1.5rem" 
                                num="9"/>
                        </div>
                    </Link>
                </li>
        </ul>
            {/* tabbar位置 */}
        </>
    )
}
const mapStateToProps = (state) => {
    return {
        num: state.main.num,
        index: state.main.index
    }
}
// setIndex   changeIndex
// 1. dispatch能力 
// 2. 返回值是一个对象

const mapDispatchToProps = (dispatch) => {
    return {
        setIndexDispatch(index) {
            dispatch(actionCreators.setIndex(index))
        }
    }
}
export default connect(mapStateToProps, 
    mapDispatchToProps)(memo(Bottom))